<template>
  <div class="container">
    <el-dialog
      :title="title"
      :visible.sync="model"
      :width="width"
      :before-close="handleClose"
      :modal="modal"
      :append-to-body="appendToBody"
      :show-close="showClose"
      :center="center"
      :max-height="maxHeight"
      :fullscreen="fullScreen"
      @open="$emit('open')"
      @close="$emit('close')"
    >
      <!-- 头部title 和全屏 -->
      <span slot="title">
        <div class="screen">
          <div class="title">{{ title }}</div>
          <i class="el-icon-full-screen fullscreen" @click="fullscreenChange" />
        </div>
      </span>
      <el-scrollbar>
        <div :style="bodyStyle">
          <slot name="body" />
        </div>
      </el-scrollbar>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
        <slot name="footer" />
      </span>
    </el-dialog>
  </div>

</template>

<script>
/**
 * Dialog 全局弹窗
 * @description 基于插槽的element-dialog弹窗封装
 * @property {Boolean} model 是否显示 Dialog
 * @property {String} title Dialog 的标题
 * @property {String} width Dialog 的宽度
 * @property {Boolean} appendToBody Dialog 自身是否插入至 body 元素上
 * @property {Boolean} modal 是否需要遮罩层
 * @property {Boolean} showClose 是否显示关闭按钮
 * @property {Boolean} center 是否对头部和底部采用居中布局
 * @property {String} maxHeight dialog 内容最大高度
 * @property {Boolean} fullscreen 是否为全屏 Dialog
 */
export default {
  name: 'DiaLog',
  props: {
    model: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: '弹窗'
    },
    width: {
      type: String,
      default: '50%'
    },
    maxHeight: {
      type: String,
      default: '50vh'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    modal: {
      type: Boolean,
      default: true
    },
    showClose: {
      type: Boolean,
      default: true
    },
    center: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fullScreen: false
    }
  },
  computed: {
    bodyStyle() {
      return {
        maxHeight: this.fullscreen ? '80vh' : this.maxHeight
      }
    }
  },

  methods: {
    fullscreenChange() {
      this.fullScreen = !this.fullScreen
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  .el-dialog__body {
    overflow: auto;
    min-height: 100px;
    padding: 20px;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
}
::v-deep .el-dialog__header{
background-color: #115ebe;
}
.container{
    .screen{
      display: flex;
      justify-content: space-between;
      .fullscreen{
        margin-right: 30px;
        color: #fff;
        &:hover{
          cursor: pointer;
          font-size: 18px;
          color:#fff
        }
      }
      .title{
        color: #fff;
      }
    }
    .dialog-footer{
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .custom-close{
      color:#333
    }
}
::v-deep .el-dialog__headerbtn .el-dialog__close{
  color:#fff;
  &:hover{
    color:#fff;
     font-size: 18px;
  }
}
</style>
